<script setup>
import { computed, ref, onMounted, onBeforeUpdate, onUpdated, watch } from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import { getAllLawyer } from '@/api/lawyer'
const search = ref('')
const resData = ref([])
const filterTableData = ref()
const pageData = ref({
    page: "1",
    size: "5",
})

watch(pageData, async() => {
    //接收数据
    const res = await getAllLawyer(pageData.value);
    //接收为Promise对象
    resData.value = res.data.data
    //格式化时间
    const tableData = res.data.data

    tableData.records.forEach(element => {
        //暂时存储时间对象
        const tmpTime = element.createTime
        //格式化
        let localTime = `${tmpTime[0]}-${tmpTime[1]}-${tmpTime[2]}`
        element.createTime = localTime
    });

    filterTableData.value = tableData.records
}, {
    immediate: true,
    deep: true
})
const handleEdit = (index, row) => {
    console.log(index, row)
}

const handleDelete = (index, row) => {
    console.log(index, row)
}

</script>


<template>
    <el-card class="card">
        <el-table :data="filterTableData" style="width: 100%;" class="custom-table" stripe>
            <el-table-column label="头像" prop="avatar" align="center">
                <el-image style="width: 60px; height: 60px" src="/src/assets/login2.png" />
            </el-table-column>
            <el-table-column label="入驻时间" prop="createTime" />
            <el-table-column label="律师姓名" prop="name" />
            <el-table-column label="电话" prop="phone" />
            <el-table-column label="地区" width="180">
                <template #default="scope">
                    <el-popover effect="light" trigger="hover" placement="top" width="auto">
                        <template #default>
                            <div>name: {{ scope.row.name }}</div>
                            <div>address: {{ scope.row.address }}</div>
                        </template>
                        <template #reference prop="address">
                            <el-tag>{{ scope.row.address }}</el-tag>
                        </template>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column align="right">
                <template #header>
                    <el-input v-model="search" size="small" placeholder="请输入关键字" />
                </template>
                <template #default="scope">
                    <el-button type="success" @click="handleEdit(scope.$index, scope.row)" circle>
                        <el-icon>
                            <Edit />
                        </el-icon>
                    </el-button>
                    <el-button type="danger" @click="handleDelete(scope.$index, scope.row)" circle>
                        <el-icon>
                            <Delete />
                        </el-icon>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <br>
        <el-pagination v-model:current-page="pageData.page" size="small" background layout="prev, pager, next"
            :total="resData.total" class="mt-4" />
    </el-card>

</template>

<style lang="scss" scoped>
.mt-4 {
    padding-left: 80%;
}

/* 修正后的表格行高样式 */
:deep(.el-table__row) {
    height: 40px !important;  /* 添加!important 强制覆盖 */
    
    /* 调整单元格内边距 */
    .el-table__cell {
        padding: 4px 0;
    }
}

/* 添加表格布局设置 */
:deep(.el-table) {
    table-layout: fixed;
}
</style>
